@charset "utf-8";
.main.main--archive{
	padding: 200rem 0;
}
.archive__outer.inner {
display: flex;
align-items: flex-start;
gap: 40rem;
}
.main--archive .inner {
max-width: 1200px;
}
.list--breadcrumb {
	display: flex;
	flex-wrap: wrap;
	font-size: var(--size-14);
	margin-bottom: 16rem;
}
.list--breadcrumb__item {
	margin-right: 8rem;
}
.list--breadcrumb__item:last-child {
	margin-right: 0;
}
.list--breadcrumb__item + .list--breadcrumb__item::before {
	content: ">";
	margin-right: 8rem;
}
.link--breadcrumb {
	color: var(--main-color);
}
.archive__title {
font-size: var(--size-32);
color: var(--main-color);
letter-spacing: 0.05em;
line-height: 1.5;
margin-bottom: 16rem;
}

/*----------------------------
	ブログ
-----------------------------*/
.sec--blog {
	padding-bottom: 128rem;
}
.left{
	width: 70%;
}
.list--blog {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
}
.list--blog__item a {
	color: var(--font-color);
}
.list--blog__item .img__outer {
	aspect-ratio: 222/148;
	width: 100%;
	border-radius: 10rem;
	margin-bottom: 8rem;
}
.list--blog__item .img__outer img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}
.list--blog__item .date {
	font-size: var(--size-12);
}
.list--tag {
	display: flex;
	justify-content: flex-end;
	font-size: var(--size-10);
	gap: 8rem;
	margin-bottom: 8rem;
}
.list--tag__item {
	background-color: var(--base-color);
	padding: 4rem 8rem;
	line-height: 1;
	border-radius: 18rem;
}
.list--blog__item .title {
	font-size: var(--size-14);
	margin-bottom: 8rem;
}
.list--blog__item .text {
	font-size: var(--size-14);
}
.aside {
background-color: #fff;
padding: 80rem 32rem;
box-sizing: border-box;
width: 23%;
}
.aside ul{
	padding-left: 15rem;
	margin-bottom: 40px;
}
.aside ul a{
	color: var(--font-color);
}
.aside ul a:hover{
	text-decoration: underline;
}

/*----------------------------
	media query
-----------------------------*/
@media screen and (min-width: 1440px){
	.list--blog {
		max-width: 994rem;
	}
}
@media screen and (max-width: 768px){
	/*----------------------------
		ブログ
	-----------------------------*/
	.list--blog {
		width: 100%;
		grid-template-columns: 1fr;
		gap: 80px;
	}
	.archive__outer.inner {
		flex-direction: column;
}
.left {
width: auto;
}
.aside{
	width: 100%;
}

}