@charset "UTF-8";
@media screen and ( width <= 768px ){
	:root{
		--breakPoint : 480;
		--contentWidth : 456;
		--gutter : 12;
		--remBase : 100vw / 480;
		--viewportBase : 100% / var( --breakPoint );
	}
}
@media print , screen and ( width > 768px ){
	:root{
		--breakPoint : 1320;
		--contentWidth : 1280;
		--gutter : 20;
		--remBase : min( 1px , 100vw / 1320 );
		--viewportBase : min( 1px , 100% / var( --breakPoint ) );
	}
}
:root{
	--contentBase : 100% / var( --contentWidth );
}
:root{
	--hoverDuration : .3s;
	--hoverTimingFunction : linear;
	--transitionBase : var( --hoverDuration ) var( --hoverTimingFunction )
;
}

/* --------------------------------------------
POSTS
--------------------------------------------- */
#postAuthor{
	margin-top : calc( 80 * var( --remBase ) );
	overflow : hidden;
	background-color : #f8f9fa;
	border-radius : calc( 12 * var( --remBase ) );
	outline : solid 1px #d1d5db;
	outline-offset : -1px;
	box-shadow : 0 calc( 2 * var( --remBase ) ) calc( 8 * var( --remBase ) ) color-mix( in sRGB , black 4% , transparent );
	.title{
		align-content : center;
		padding-block : calc( 8 * var( --remBase ) );
		font-weight : 700;
		color : white;
		text-align : center;
		background-color : var( --categoryColor );
		text-box : trim-both cap alphabetic;
	}
	> div{
		display : grid;
		grid-template-rows : auto 1fr;
		padding-block : calc( 24 * var( --remBase ) );
	}
	picture{
		width : auto;
		aspect-ratio : 1;
		overflow : hidden;
		background-color : color-mix( in sRGB , var( --categoryColor ) 50% , transparent );
		border-radius : 50%;
		img{
			width : 100%;
			height : 100%;
			object-fit : contain;
			object-position : center;
			object-position : center bottom;
			filter : box-shadow( calc( 2 * var( --remBase ) ) calc( 2 * var( --remBase ) ) calc( 2 * var( --remBase ) ) color-mix( in sRGB , black 20% , transparent ) );
		}
	}
	.names{
		font-size : calc( 16 * var( --remBase ) );
		font-weight : 700;
		line-height : 1.4;
		letter-spacing : .05em;
	}
	.description{
		letter-spacing : .05em;
	}
	@media screen and ( width <= 768px ){
		.title{
			height : calc( 32 * var( --remBase ) );
			padding-inline : calc( 24 * var( --contentBase ) );
			font-size : calc( 16 * var( --remBase ) );
		}
		> div{
			grid-template-columns : calc( 80 * 100% / 408 ) 1fr;
			row-gap : calc( 12 * var( --remBase ) );
			column-gap : calc( 20 * 100% / 408 );
			align-items : center;
			padding-inline : calc( 24 * var( --contentBase ) );
		}
		picture{
			grid-row : 1;
			grid-column : 1;
			height : calc( 80 * var( --remBase ) );
			padding-top : calc( 12 * var( --remBase ) );
		}
		.names{
			grid-row : 1;
			grid-column : 2;
			font-size : calc( 18 * var( --remBase ) );
			line-height : 1.6;
		}
		.description{
			grid-row : 2;
			grid-column : 1/-1;
			font-size : calc( 15 * var( --remBase ) );
			line-height : 1.6;
		}
	}
	@media print , screen and ( width > 768px ){
		.title{
			height : calc( 52 * var( --remBase ) );
			padding-inline : calc( 24 * 100% / 940 );
			font-size : calc( 20 * var( --remBase ) );
		}
		> div{
			grid-template-columns : auto 1fr;
			row-gap : calc( 12 * var( --remBase ) );
			column-gap : calc( 40 * 100% / 860 );
			align-items : start;
			padding-inline : calc( 40 * 100% / 940 );
		}
		picture{
			grid-row : 1/-1;
			grid-column : 1;
			align-self : start;
			height : calc( 134 * var( --remBase ) );
			padding-top : calc( 24 * var( --remBase ) );
		}
		.names{
			grid-row : 1;
			grid-column : 2;
			font-size : calc( 18 * var( --remBase ) );
			line-height : 1.6;
		}
		.description{
			grid-row : 2;
			grid-column : 2;
			font-size : calc( 15 * var( --remBase ) );
			line-height : 1.6;
		}
	}
}
#paginationSingle{
	.prev , .next{
		display : grid;
		grid-row : 1;
		grid-auto-flow : column;
		align-items : center;
		img{
			width : auto;
		}
	}
	.prev{
		justify-content : start;
		&::before{
			display : block;
			width : auto;
			aspect-ratio : 14/21;
			font-size : 0;
			content : "";
			background : url( "../../images/ui/arrow/prev02.svg" ) left top / contain no-repeat;
			filter : invert( 98% ) sepia( 67% ) saturate( 1422% ) hue-rotate( 193deg ) brightness( 130% ) contrast( 73% );
		}
	}
	.next{
		justify-content : end;
		&::after{
			display : block;
			width : auto;
			aspect-ratio : 14/21;
			font-size : 0;
			content : "";
			background : url( "../../images/ui/arrow/next02.svg" ) left top / contain no-repeat;
			filter : invert( 98% ) sepia( 67% ) saturate( 1422% ) hue-rotate( 193deg ) brightness( 130% ) contrast( 73% );
		}
	}
	.archive{
		display : block;
		align-content : center;
		color : white;
		text-align : center;
		background-color : var( --categoryColor );
		text-box : trim-both cap alphabetic;
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 30 * var( --remBase ) );
		.prev , .next{
			column-gap : calc( 10 * 100% / 424 );
			height : calc( 100 * var( --remBase ) );
			padding-inline : calc( 16 * 100% / 456 );
			font-size : calc( 12.8 * var( --remBase ) );
			line-height : calc( 15.36 / 12.8 );
			border-block : solid 1px #ccc;
			border-inline : solid 1px #ccc;
			img{
				height : calc( 72 * var( --remBase ) );
			}
		}
		.prev{
			&::before{
				height : calc( 24 * var( --remBase ) );
			}
		}
		.next{
			&::after{
				height : calc( 24 * var( --remBase ) );
			}
		}
		.prev + .next{
			border-top : 0;
		}
		.archive{
			width : calc( 282 * 100% / 456 );
			height : calc( 48 * var( --remBase ) );
			margin-inline : auto;
			margin-top : calc( 30 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-rows : calc( 116 * var( --remBase ) ) calc( 60 * var( --remBase ) );
		grid-template-columns : repeat( 2 , 50% );
		row-gap : calc( 32 * var( --remBase ) );
		margin-top : calc( 40 * var( --remBase ) );
		.prev , .next{
			column-gap : calc( 10 * 100% / 438 );
			padding-inline : calc( 16 * 100% / 470 );
			font-size : calc( 14.4 * var( --remBase ) );
			line-height : calc( 17.28 / 14.4 );
			border-block : solid 1px #ccc;
			border-inline : solid 1px #ccc;
			img{
				height : calc( 74 * var( --remBase ) );
			}
		}
		.prev{
			grid-column : 1;
			&::before{
				height : calc( 26 * var( --remBase ) );
			}
		}
		.next{
			grid-column : 2;
			&::after{
				height : calc( 26 * var( --remBase ) );
			}
		}
		.prev + .next{
			border-left : 0;
		}
		.archive{
			grid-row : 2;
			grid-column : 1/-1;
			justify-self : center;
			width : calc( 312 * 100% / 940 );
			height : 100%;
			font-size : calc( 18 * var( --remBase ) );
		}
	}
}


/* --------------------------------------------
COLUMN
--------------------------------------------- */
#related{
	h3{
		padding : 0;
		margin : 0;
		font-weight : 700;
		background-color : transparent;
		border-bottom : solid 1px #ccc;
	}
	ul , li{
		margin : 0;
		list-style : none;
	}
	li , a{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 4;
		row-gap : 0;
	}
	a{
		position : relative;
		width : 100%;
		height : 100%;
		background-color : white;
		outline : solid 1px #ccc;
		outline-offset : -1px;
		box-shadow : calc( 4 * var( --remBase ) ) calc( 4 * var( --remBase ) ) calc( 4 * var( --remBase ) ) color-mix( in sRGB , black 12.5% , transparent );
	}
	picture{
		display : block;
		width : 100%;
		height : auto;
		aspect-ratio : 1376/768;
		overflow : hidden;
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	h4{
		padding-bottom : 0;
		margin-bottom : 0;
		font-weight : 600;
		color : #333;
		border-bottom : 0;
	}
	.category{
		font-weight : 500;
		color : var( --categoryColor );
	}
	dl{
		display : grid;
		grid-auto-flow : column;
		align-items : baseline;
		justify-content : end;
		font-weight : 400;
		color : #a1a1a1;
	}
	@media screen and ( width <= 768px ){
		padding-bottom : calc( 48 * var( --remBase ) );
		margin-top : calc( 64 * var( --remBase ) );
		h3{
			padding-bottom : calc( 8 * var( --remBase ) );
			font-size : calc( 24 * var( --remBase ) );
		}
		ul{
			display : grid;
			grid-template-columns : repeat( 2 , calc( 222 * 100% / 456 ) );
			row-gap : calc( 24 * var( --remBase ) );
			align-items : stretch;
			justify-content : space-between;
			margin-top : calc( 28 * var( --remBase ) );
		}
		a{
			padding-bottom : calc( 20 * var( --remBase ) );
		}
		h4{
			padding-inline : calc( 12 * 100% / 222 );
			margin-top : calc( 12 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 20 / 14 );
		}
		.category{
			padding-inline : calc( 12 * 100% / 222 );
			margin-top : calc( 20 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 18 / 14 );
		}
		dl{
			padding-inline : calc( 12 * 100% / 222 );
			margin-top : calc( 4 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-inline : calc( 15 * 100% / 810 );
		padding-bottom : calc( 48 * var( --remBase ) );
		margin-top : calc( 64 * var( --remBase ) );
		h3{
			padding-bottom : calc( 12 * var( --remBase ) );
			font-size : calc( 24 * var( --remBase ) );
		}
		ul{
			display : grid;
			grid-template-columns : repeat( 3 , calc( 240 * 100% / 780 ) );
			row-gap : calc( 20 * var( --remBase ) );
			align-items : stretch;
			justify-content : space-between;
			margin-top : calc( 32 * var( --remBase ) );
		}
		a{
			padding-bottom : calc( 20 * var( --remBase ) );
		}
		h4{
			padding-inline : calc( 8 * 100% / 240 );
			margin-top : calc( 14 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 18 / 14 );
		}
		.category{
			padding-inline : calc( 16 * 100% / 240 );
			margin-top : calc( 24 * var( --remBase ) );
			font-size : calc( 12 * var( --remBase ) );
			line-height : calc( 16 / 12 );
		}
		dl{
			padding-inline : calc( 16 * 100% / 240 );
			margin-top : calc( 4 * var( --remBase ) );
			font-size : calc( 12 * var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	#related{
		a:hover{
			text-decoration : none;
			background-color : color-mix( in sRGB , black 5% , transparent );
			box-shadow : none;
			opacity : 1;
			picture{
				img{
					scale : 1.2;
				}
			}
			h4{
				font-weight : 900;
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#related{
		a{
			transition : box-shadow var( --transitionBase ) , background-color var( --transitionBase );
		}
		img{
			transition : scale var( --transitionBase );
		}
		h4{
			font-weight : scale var( --transitionBase );
		}
	}
}