@charset "UTF-8";
/**
 * Style.css
 * ./css/base.css
 *
 * Last Update: 2023-12-07
 * ----------------------------------------------------------------------*/



/* Summary */
.summary {
	margin-top: 6rem;
}

.summary__title {
	font-size: 3rem;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding-bottom: 4rem;
	border-bottom: 1px solid #aaa;
	margin-inline: 1.6rem;
}

.summary--b {
	background-color: #eee;
}

/* Summary > List */
.summary-list {
	display: grid;
	column-gap: 0px;
	row-gap: 2rem;
	grid-template-columns: repeat(4, 1fr);
	margin-inline: auto;
	padding-inline: 1.6rem;
	margin-top: 4rem;
}


/* Summary > List > Item */
.summary-list-item {
	position: relative;
	grid-column: 1 / -1;
	padding-bottom: 2rem;
	border-bottom: 1px solid #ddd;
	margin-bottom: 2rem;
}


/* Summary > List > Item > Link */
.summary-list-item__link {
	display: block;
}


/* Summary > List > Item > Container */
.summary-list-item__container {
	display: block;
}

.summary--b .summary-list-item__container {
	display: grid;
	grid-template-columns: 5fr 8fr;
	column-gap: 2rem;
	grid-template-areas: 
		"media content";
}

.summary--d .summary-list-item__container {
	display: grid;
	grid-template-columns: 1fr 5fr;
	column-gap: 2rem;
	align-items: center;
	grid-template-areas: 
		"media content";
}


/* Summary > List > Item > Label */
.summary-list-item__label {
	grid-area: label;
	position: absolute;
	left: 0; top: 0;
	background-color: #ddd;
	padding: 2px 5px;
	font-size: 10px;
}


/* Summary > List > Item > Media */
.summary-list-item__media {
	grid-area: media;
	overflow: hidden;
}


/* Summary > List > Item > Content */
.summary-list-item__content {
	grid-area: content;
}


/* Eyecatch */
/* Eyecatch > picture */
.summary__media {
	width: 100%;
}
/* Eyecatch > picture > img */
.summary__media-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .666s ease;
}
.summary-list-item__link:hover .summary__media-image {
	transform: scale(1.1);
}
.summary--b .summary__media-image {
	aspect-ratio: 5 / 8;
}

.summary--d .summary__media-image {
	aspect-ratio: 5 / 8;
}


/* Headline */
.summary__headline {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5em;
	text-align: justify;
}
.summary-list-item__link:hover .summary__headline {
	text-decoration: underline;
	color: #555;
}

/* 抜粋 */
.summary__excerpt {
	font-size: 14px;
	line-height: 1.5em;
	text-align: justify;
}

/* 日時 */
.summary__date {
	font-size: 11px;
	line-height: 1.5em;
	text-align: right;
}
/* 日時 > 公開日時 */
.summary__date--published:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	content: "\f274";
}
/* 日時 > 更新日時 */
.summary__date--modified:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f2f1";
}
/* 執筆者名 */
.summary__author {
	font-size: 11px;
	line-height: 1.5em;
	text-align: right;
}

/* タクソノミー */
.summary__taxonomy {}




@media (min-width: 768px){
	.summary__title {
		font-size: 5.5rem;
		text-align: left;
	}
		.summary--a .summary-list {
		column-gap: 2rem;
		row-gap: 2rem;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: repeat(3, auto);
	}
	.summary--a .summary-list-item {
		grid-area: auto;
	}
	.summary--a .summary-list-item:nth-child(1) {
		grid-area: 1 / 2 / span 1 / span 3;
	}
	.summary--a .summary-list-item:nth-child(1) .summary__media-image {
		aspect-ratio: 2.35 / 1;
	}
	.summary--a .summary-list-item:nth-child(1) .summary-list-item__link:hover .summary__media-image {
		transform: scale(1.06);
	}
	.summary--a .summary-list-item:nth-child(1) .summary__headline {
		font-size: 2em;
	}
	.summary--b .summary-list {
		column-gap: 2rem;
		row-gap: 2rem;
		grid-template-columns: repeat(12, 1fr)
	}
	.summary--b .summary-list-item {
		grid-column: span 4;
	}
	.summary--c .summary-list {
		column-gap: 2rem;
		row-gap: 2rem;
		grid-template-columns: repeat(12, 1fr)
	}
	.summary--c .summary-list-item {
		grid-column: span 3;
	}
	.summary--d .summary__media-image {
		aspect-ratio: 1 / 1;
	}
}