@charset "utf-8";

/*--------------------------------------------------------------
  記事アーカイブ用 archive
--------------------------------------------------------------*/

.archiveblock {
	height: auto;
	min-height: 100vh;
	padding: 10%;
	background-color: #fbfbf6;
	color: #615f51;
	font-size: 1.2rem;
	line-height: 2.2rem;
	text-align: justify;
}

.archiveblock h1 {
	margin-bottom: 8rem;
}

.archiveblock p {
	font-size: 1.2rem;
	line-height: 2.2rem;
	color: #747267;
}

.archiveblock a {
	text-decoration: none;
	color: #747267;
	font-size: unset;
}

.archiveblock ol {
	padding-left: 1.5rem;
}

.archiveblock li {
	font-size: 1.2rem;
	line-height: 2.2rem;
	text-align: justify;
	color: #747267;
	font-weight: 400;
	margin-top: 2rem;
}

.archiveblock .text-right {
	float: right;
}

.archiveblock .backimg-thumb {
	z-index: 1;
	aspect-ratio: 1/1;
	position: relative;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	align-items: stretch;
	border-radius: 1rem;
	border: 1px solid #eee;
}

@media (max-width: 767.98px) {

	/* sm 以下の画面サイズの場合のスタイル */
	.archiveblock {
		padding: 140px 10% 10% 10%;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {

	/* md の画面サイズの場合のスタイル */
	.archiveblock {
		padding: 140px 10% 10% 10%;
	}
}

@media (min-width: 992px) {
	/* lg 以上の画面サイズの場合のスタイル */
}


.archive-posts {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 5rem;
	row-gap: 5rem;
}

@media only screen and (max-width: 989px) {
	.archive-posts {
		display: grid;
		grid-template-columns: 1fr;
		column-gap: 0rem;
		row-gap: 5rem;
	}
}

.archiveblock h5 {
	text-align: start;
	margin: 0;
}

.archiveblock .archive-date {
	font-size: 0.7rem;
	line-height: 1.0rem !important;
	margin: 0;
	padding-bottom: 0.5rem;
}

.archiveblock .excerpt {
	font-size: 0.9rem;
	line-height: 1.2rem;
}

.archiveblock .categories {
	font-size: 0.7rem;
	line-height: 1.0rem;
}

.archiveblock .tags {
	font-size: 0.7rem;
	line-height: 1.0rem;
}

.archiveblock img {
	border-radius: 20px;
	width: 100%;
	height: 100%;
	aspect-ratio: 1/1;

}


/* カテゴリとタグの設定 */

.archiveblock .thumbnail {
	margin-bottom: 1rem;
}

.archiveblock .linkageset {
	margin-top: 0.5rem;
	display: block;
	justify-content: flex-start;
	align-items: center;
}

.archiveblock .categories {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.archiveblock .categories a {
	background-color: rgb(0 0 0 / 0.4);
	border-radius: 1.2rem;
	font-size: 0.6rem !important;
	font-weight: 600;
	color: #fff;
	padding: 0.1rem 0.5rem 0.1rem 0.5rem;
	margin: 0.2rem 0.5rem 0.2rem 0.5rem;
	white-space: nowrap !important;
}

.archiveblock .categories a:hover {
	background-color: rgb(0 0 0 / 0.6);
}

.archiveblock .tags {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.archiveblock .tags a {
	background-color: rgb(0 0 0 / 0.4);
	border-radius: 1.2rem;
	font-size: 0.6rem !important;
	font-weight: 600;
	color: #fff;
	padding: 0.1rem 0.5rem 0.1rem 0.5rem;
	margin: 0.2rem 0.5rem 0.2rem 0.5rem;
	white-space: nowrap !important;
}

.archiveblock .tags a:hover {
	background-color: rgb(0 0 0 / 0.6);
}

.archiveblock .social-share {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 0.5rem 0 0 0;
}

.archiveblock .social-share a {
	margin: 0 0.5rem 0 0;
	padding: 0;
}


/*--------------------------------------------------------------
    アーカイブ一覧用
  --------------------------------------------------------------*/

.archive-grid {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 5vw;
	row-gap: 5rem;
}

.archive-grid-inner {
	width: 100%;
}

.archive-grid-inner>.thumbnail {
	width: 100%;
	aspect-ratio: 1/1;
	margin-bottom: 2rem;
}

.archive-grid-inner>.title h5 {
	text-align: justify;
	white-space: normal;
	line-height: 1.6rem;
	height: 3.2rem;
	overflow-y: hidden;
}

/* Small devices (phones) */
@media (max-width: 767.98px) {

	/* sm 以下の画面サイズの場合のスタイル */
	.archive-grid {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		column-gap: 0vw;
		row-gap: 5rem;
	}
}

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 991.98px) {

	/* md の画面サイズの場合のスタイル */
	.archive-grid {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 7vw;
		row-gap: 5rem;
	}
}

/* Large devices (desktops) */
@media (min-width: 992px) {

	/* lg 以上の画面サイズの場合のスタイル */
	.archive-grid {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		column-gap: 5vw;
		row-gap: 5rem;
	}
}