/*////////////////////////////////////////////////////////////////////////////*/

/*! archive.css */

/*////////////////////////////////////////////////////////////////////////////*/


/*------------------------------------------------------------------------------

	インデックスタイトル

------------------------------------------------------------------------------*/


/*	コンテナ
------------------------------------------------------------------------------*/

.index-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	/**/
	position: relative;
	margin: 0 auto;
	margin-bottom: calc(2em * (1 / 1.25));
	padding: .75em 1em;
	padding-left: 3em;
	background: rgb(var(--color-text-h-rgb) / .07);
	border-radius: .25em;
	font-size: 125%;
	color: rgb(var(--color-text-h-rgb));
	fill: rgb(var(--color-text-h-rgb));
	/**/
	font-feature-settings: 'palt';
}

.index-title.display-filter-form {
	margin-bottom: 0;
	border-radius: .25em .25em 0 0;
}


/*	テキスト
------------------------------------------------------------------------------*/

.index-title-main {
	margin-right: 1em;
}

.index-title-main > span {
	margin-right: .25em;
}

.index-title-main .y,
.index-title-main .n {
	margin-right: .25em;
}

.index-title-main .year > .y {
	margin-right: 0;
}


/*	アイコン
------------------------------------------------------------------------------*/

.index-title-icon {
	overflow: hidden;
	position: absolute;
	left: 1.5em;
	top: 50%;
	width: 1.5em;
	height: 1.5em;
	transform: translateX(-50%) translateY(-50%);
}

.index-title-icon.author {
	border-radius: 50%;
}

.index-title-icon svg,
.index-title-icon img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/**/

.filtered-icon {
	position: absolute;
	right: 0;
	bottom: 0;
	overflow: hidden;
	width: .9em;
	height: .9em;
	background: rgb(var(--color-text-h-rgb));
	border-radius: 50%;
}

.filtered-icon > svg {
	position: absolute;
	left: 50%;
	top: 50%;
	width: .5em;
	height: .5em;
	transform: translateX(-50%) translateY(-50%);
	fill: #FFF;
}

.filtered-label {
	white-space: nowrap;
}


/*	＋記号
------------------------------------------------------------------------------*/

.index-title-main > .plus {
	margin: 0 .125em;
	opacity: .5;
}


/*	ページ数・記事数
------------------------------------------------------------------------------*/

.index-title-pages,
.index-title-results-found {
	margin: .25em 1em .25em 0;
	line-height: 1;
	white-space: nowrap;
	font-weight: normal;
	font-size: 75%;
}

.index-title .sep {
	margin: 0 .125em;
	opacity: .5;
}

.index-title-results-found {
	margin-right: .5em;
}

.index-title-results-found .num {
	margin-right: .125em;
}

.index-title-results-found .unit {
	margin-left: .125em;
	font-size: 75%;
}


/*------------------------------------------------------------------------------

	検索結果ゼロ件

------------------------------------------------------------------------------*/

.no-post-message {
	--text-color: rgb(var(--color-alert-rgb, var(--color-text-p-rgb)) / 1);
	/**/
	display: flex;
	align-items: center;
	justify-content: center;
	/**/
	margin: 0 auto;
	padding: 1em;
	background: rgb(var(--color-alert-rgb, var(--color-text-p-rgb)) / .1);
	border: 1px dashed rgb(var(--color-alert-rgb, var(--color-text-p-rgb)) / .5);
	border-radius: .5em;
	line-height: 1.5;
	text-align: center !important;
	text-wrap: balance;
	font-weight: bold;
	color: var(--text-color);
	fill: var(--text-color);
	opacity: .5;
	font-feature-settings: "palt";
}

.no-post-message > svg {
	flex: none;
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin-right: .25em;
}

.index-title + .no-post-message,
.search-box + .no-post-message,
.no-post-message + .btn {
	margin-top: calc(var(--line-height-p) * 1em);
}


/*------------------------------------------------------------------------------

	エラー

------------------------------------------------------------------------------*/

.error-message {
	display: grid;
	grid-template-columns: 1.5em 1fr;
	grid-gap: .5em;
	/**/
	padding: .75em 1em;
	background: #FF6;
	border: 1px dotted #C00;
	border-radius: .25em;
	line-height: 1.5;
	font-weight: bold;
	color: rgb(224 0 0 / 1);
}

.error-message::before {
	content: '';
	display: block;
	width: 1.5em;
	height: 1.5em;
	background: rgb(224 0 0 / 1);
	-webkit-mask-image: var(--svg-i);
	mask-image: var(--svg-i);
}


/*------------------------------------------------------------------------------

	アーカイブページャー（Prev,Select,Next）

------------------------------------------------------------------------------*/


/*	コンテナ
------------------------------------------------------------------------------*/

.pager-box,
.autopager-box {
	--btn-border-color-rgb: var(--color-text-link-rgb, 51 51 51);
	--btn-border-color-a: .5;
	--btn-text-color-rgb: var(--color-text-link-rgb, 51 51 51);
	--btn-text-color-a: 1;
	/**/
	grid-column: 1 / -1;
	/**/
	width: 100%;
}

.pagination {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-gap: .5em;
}


/*	コントロール
------------------------------------------------------------------------------*/

.pagination-pages,
.pagination-prev,
.pagination-next,
.autopager-more {
	position: relative;
	margin: 0;
	padding: 0;
	border: none;
	box-shadow: var(--btn-box-shadow, none);
	outline: none;
}

.pagination-prev {
	grid-column: 1/2;
}

.pagination-pages {
	grid-column: 2/3;
}

.pagination-next {
	grid-column: 3/4;
}

.pagination-button,
.pagination-select,
.pagination-pages-label {
	display: block;
	margin: 0;
	padding: 1em 3em;
	border: var(--btn-border-width, 1px) solid rgb(var(--btn-border-color-rgb) / var(--btn-border-color-a));
	border-radius: var(--btn-border-radius, 0px);
	text-align: center;
	line-height: 1;
	white-space: nowrap;
	letter-spacing: 0;
	font-size: 100% !important;
	color: rgb(var(--btn-text-color-rgb) / var(--btn-text-color-a));
	fill: rgb(var(--btn-text-color-rgb) / var(--btn-text-color-a));
	font-feature-settings: "palt";
	/**/
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/**/
	transition: all .2s ease-out;
}


/*	アローアイコン
------------------------------------------------------------------------------*/

.pagination-prev::after,
.pagination-next::after {
	content: '';
	position: absolute;
	z-index: 3;
	top: 50%;
	width: .5em;
	height: .5em;
	border-right: max(var(--btn-border-width), 2px) solid rgb(var(--btn-border-color-rgb) / var(--btn-border-color-a));
	border-bottom: max(var(--btn-border-width), 2px) solid rgb(var(--btn-border-color-rgb) / var(--btn-border-color-a));
	/**/
	transition: border .2s ease-out;
}

.pagination-prev::after {
	left: 1.25em;
	transform: translateY(-50%) rotate(135deg);
}

.pagination-next::after {
	right: 1.25em;
	transform: translateY(-50%) rotate(-45deg);
}


/*	セレクトボックス
------------------------------------------------------------------------------*/

.pagination-pages {
	position: relative;
	border-radius: .25em;
}

/**/

.pagination-select {
	cursor: pointer;
	position: relative;
	z-index: 2;
	padding-right: 5em;
	font-size: inherit;
	/**/
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	/**/
	display: block;
	width: 100%;
	padding: 1em;
	opacity: 0;
}

.pagination-select > option {
	line-height: 1.5;
	text-align: left;
}

/**/

.pagination-pages-label {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	padding-right: 5em;
}

/**/

.pagination-pages::after {
	content: '';
	position: absolute;
	z-index: 3;
	right: 1.25em;
	top: 50%;
	width: .5em;
	height: .5em;
	margin: -.1em 0 0;
	border-right: max(var(--btn-border-width), 2px) solid rgb(var(--btn-border-color-rgb) / var(--btn-border-color-a));
	border-bottom: max(var(--btn-border-width), 2px) solid rgb(var(--btn-border-color-rgb) / var(--btn-border-color-a));
	transform: translateY(-50%) rotate(45deg);
	/**/
	transition: border .2s ease-out;
}


/*	HOVER
------------------------------------------------------------------------------*/

@media (any-hover: hover) {

	.pagination-button:hover,
	.pagination-pages:hover,
	.pagination-pages.focus {
		--btn-border-color-a: 1;
		--btn-text-color-a: 1;
		/**/
		cursor: pointer;
	}

/**/}
@media (any-hover: none) {

	.pagination-button:active,
	.pagination-pages:active,
	.pagination-pages.focus {
		--btn-border-color-a: 1;
		--btn-text-color-a: 1;
	}

/**/}


/*	BP
------------------------------------------------------------------------------*/

@media (max-width: 1280px) {

	.pagination {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 1em;
	}

	.gaph_720px .pagination {
		grid-gap: .5rem;
	}

	.pagination-prev,
	.pagination-pages,
	.pagination-next {
		margin: 0;
	}

	.pagination-prev {
		grid-row: 1;
		grid-column: 1/2;
	}

	.pagination-next {
		grid-row: 1;
		grid-column: 2/3;
	}

	.pagination-pages {
		grid-row: 2;
		grid-column: 1/3;
	}

	.pagination-prev,
	.pagination-next,
	.pagination-select,
	.pagination-pages-label {
		padding: 1em !important;
		font-size: 16px !important;
	}

	.pagination-select,
	.pagination-select > option {
		width: 100%;
		text-align: center;
	}

/**/}


/*------------------------------------------------------------------------------

	アーカイブページャー（Autopager）

------------------------------------------------------------------------------*/

.autopager-box {
	width: 100%;
	margin: 0 auto;
}

/**/

.autopager-more {
	width: 100%;
	margin: 0 auto;
}

.autopager-more-a {
	display: flex;
	align-items: center;
	/**/
	position: relative;
	z-index: 2;/* ※指定しないとホバーが効かない */
	padding: 1em;
	/**/
	transition: opacity .2s ease-out;
	opacity: 1;
}

.autopager-more-label {
	flex-grow: 1;
}

.autopager-more-icon {
	margin: 0 0 0 1em;
}

.autopager-more-icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

/**/

.autopager-more-progress {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	/**/
	display: flex;
	align-items: center;
	justify-content: center;
	/**/
	transition: opacity .2s ease-out;
	opacity: 0;
}

.autopager-more-progress > .bounce {
	display: inline-block;
	width: .5em;
	height: .5em;
	margin: 0 .25em;
	background-color: rgb(var(--color-text-p-rgb) / 1);
	border-radius: 100%;
	/**/
	animation: bouncedelay 1.4s infinite ease-in-out both;
}

.autopager-more-progress > .bounce1 {
	animation-delay: -.6s;
}

.autopager-more-progress > .bounce2 {
	animation-delay: -.3s;
}

@keyframes bouncedelay {
	0%, 80%, 100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	40% {
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}

/**/

.autopager-box.loading .autopager-more-a {
	--btn-border-color-a: 0 !important;
	/**/
	pointer-events: none;
	opacity: 0;
}

.autopager-box.loading .autopager-more-progress {
	--btn-border-color-a: 0 !important;
	/**/
	opacity: 1;
}