@charset "UTF-8";

/* --------------------------------------------
POSTS
--------------------------------------------- */
:where( #recommends , #relations ){
	a{
		display : block;
		overflow : hidden;
		background-color : white;
		border-radius : calc( 8 * var( --remBase ) );
		box-shadow : 0 calc( 1 * var( --remBase ) ) calc( 3 * var( --remBase ) ) color-mix( in sRGB , black 10% , transparent );
	}
	picture{
		width : 100%;
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	h4{
		font-weight : 600;
	}
	@media screen and ( width <= 768px ){
		> ul{
			> li + li{
				margin-top : calc( 16 * var( --remBase ) );
			}
		}
		a{
			padding-bottom : calc( 16 * var( --remBase ) );
		}
		picture{
			height : calc( 252 * var( --remBase ) );
		}
		h4{
			padding-inline : calc( 20 * var( --contentBase ) );
			margin-top : calc( 16 * var( --remBase ) );
			font-size : calc( 13 * var( --remBase ) );
			line-height : 1.5;
		}
	}
	@media print , screen and ( width > 768px ){
		> ul{
			display : grid;
			grid-template-columns : repeat( 3 , calc( 296 * 100% / 940 ) );
			justify-content : space-between;
		}
		a{
			padding-bottom : calc( 12 * var( --remBase ) );
		}
		picture{
			height : calc( 160 * var( --remBase ) );
		}
		h4{
			padding-inline : calc( 16 * 100% / 296 );
			margin-top : calc( 12 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			line-height : 1.5;
		}
	}
}
@media ( hover : hover ){
	#recommends , #relations{
		a:hover{
			img{
				scale : 1.05;
			}
			h4{
				color : var( --categoryColor );
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#recommends , #relations{
		a{
			img{
				transition : scale var( --transitionBase );
			}
			h4{
				transition : color var( --transitionBase );
			}
		}
	}
}
#recommends{
	h3{
		font-size : calc( 20 * var( --remBase ) );
		font-weight : 700;
		line-height : 1.8;
	}
	> ul{
		margin-top : calc( 20 * var( --remBase ) );
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 30 * var( --remBase ) );
		margin-top : calc( 60 * var( --remBase ) );
		border-top : solid 1px #e5e7eb;
	}
	@media print , screen and ( width > 768px ){
		padding-block : calc( 30 * var( --remBase ) );
		margin-top : calc( 60 * var( --remBase ) );
	}
}
#relations{
	margin-top : calc( 64 * var( --remBase ) );
	h3{
		font-weight : 700;
		border-left-color : var( --categoryColor );
		border-left-style : solid;
		border-left-width : calc( 4 * var( --remBase ) );
	}
	> ul{
		margin-top : calc( 24 * var( --remBase ) );
	}
	time{
		display : block;
		color : #94a3b8;
	}
	@media screen and ( width <= 768px ){
		h3{
			padding-left : calc( 16 * var( --contentBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : 1.79;
		}
		time{
			padding-inline : calc( 20 * var( --contentBase ) );
			margin-top : calc( 8 * var( --remBase ) );
			font-size : calc( 15 * var( --remBase ) );
			line-height : 1.4;
		}
	}
	@media print , screen and ( width > 768px ){
		h3{
			padding-left : calc( 12 * 100% / 940 );
			font-size : calc( 20 * var( --remBase ) );
			line-height : 1.8;
		}
		time{
			padding-inline : calc( 16 * 100% / 296 );
			margin-top : calc( 8 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : 1.4;
		}
	}
}
#sidebarPost{
	> section{
		padding-block : calc( 24 * var( --remBase ) );
		background : linear-gradient( 135deg , #f9fafb , white );
		border-radius : calc( 12 * var( --remBase ) );
		outline : solid 1px #e5e7eb;
		outline-offset : -1px;
		+ section{
			margin-top : calc( 32 * var( --remBase ) );
		}
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 48 * var( --remBase ) );
		> section{
			padding-inline : calc( 24 * var( --contentBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		> section{
			padding-inline : calc( 24 * 100% / 300 );
		}
	}
}
#sidebarRelated , #sidebarCategories{
	h3{
		padding-bottom : calc( 12 * var( --remBase ) );
		font-weight : 700;
		border-bottom-color : var( --categoryColor );
		border-bottom-style : solid;
		border-bottom-width : calc( 2 * var( --remBase ) );
	}
	ul{
		margin-top : calc( 16 * var( --remBase ) );
	}
	@media screen and ( width <= 768px ){
		h3{
			font-size : calc( 15 * var( --remBase ) );
			line-height : 1.8;
		}
	}
	@media print , screen and ( width > 768px ){
		h3{
			font-size : calc( 16 * var( --remBase ) );
			line-height : 1.8;
		}
	}
}
#sidebarRelated{
	li + li{
		margin-top : calc( 20 * var( --remBase ) );
	}
	picture{
		width : 100%;
		overflow : hidden;
		border-radius : calc( 4 * var( --remBase ) );
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	time , h4{
		margin-top : calc( 4 * var( --remBase ) );
		font-size : calc( 14 * var( --remBase ) );
		line-height : 1.5;
	}
	time{
		display : block;
		color : #94a3b8;
	}
	@media screen and ( width <= 768px ){
		picture{
			img{
				width : 100%;
				height : auto;
			}
		}
	}
	@media print , screen and ( width > 768px ){
		picture{
			height : calc( 120 * var( --remBase ) );
		}
	}
}
#sidebarCategories{
	a{
		display : grid;
		grid-template-columns : auto 1fr;
		grid-auto-flow : column;
		align-items : start;
		padding-block : calc( 8 * var( --remBase ) );
		border-radius : calc( 6 * var( --remBase ) );
	}
	a::before{
		display : block;
		height : calc( 6 * var( --remBase ) );
		aspect-ratio : 1;
		font-size : 0;
		content : "";
		background-color : var( --categoryColor );
		border-radius : 50%;
	}
	@media screen and ( width <= 768px ){
		a{
			column-gap : calc( 12 * 100% / 384 );
			padding-inline : calc( 12 * 100% / 408 );
			font-size : calc( 13 * var( --remBase ) );
			line-height : 1.79;
			&::before{
				margin-top : calc( 8.7 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		a{
			column-gap : calc( 12 * 100% / 228 );
			padding-inline : calc( 12 * 100% / 252 );
			font-size : calc( 14 * var( --remBase ) );
			line-height : 1.8;
			&::before{
				margin-top : calc( 9.6 * var( --remBase ) );
			}
		}
	}
}
@media ( hover : hover ){
	#sidebarCategories{
		a:hover{
			background-color : color-mix( in sRGB , var( --categoryColor ) 10% , white );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#sidebarCategories{
		a{
			transition : background-color var( --transitionBase );
		}
	}
}

/* --------------------------------------------
PRICE
--------------------------------------------- */
#archivementsAreaPrices{
	position : relative;
	overflow-x : clip;
	background-color : #dcf8ff;
	.box{
		background-color : white;
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 92 * var( --remBase ) );
		padding-bottom : calc( 32 * var( --remBase ) );
		margin-bottom : calc( 32 * var( --remBase ) );
		.box{
			padding-block : calc( 48 * var( --remBase ) );
			padding-inline : calc( 12 * var( --contentBase ) );
			margin-top : calc( 28 * var( --remBase ) );
			border-radius : calc( 32 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 100 * var( --remBase ) );
		padding-bottom : calc( 60 * var( --remBase ) );
		margin-bottom : calc( 60 * var( --remBase ) );
		.box{
			padding-block : calc( 60 * var( --remBase ) );
			padding-inline : calc( 38 * 100% / 1080 );
			margin-top : calc( 30 * var( --remBase ) );
			border-radius : calc( 30 * var( --remBase ) );
		}
	}
}
#area{
	h2{
		font-weight : 700;
		text-align : center;
	}
	.box{
		background-color : white;
	}
	h3{
		border-bottom : solid 1px var( --base );
		a{
			width : fit-content;
		}
	}
	h4{
		font-weight : 0;
	}
	ul{
		display : flex;
		flex-wrap : wrap;
	}
	a{
		display : block;
		align-content : center;
		font-weight : 500;
		color : white;
		text-align : center;
		background-color : var( --blue03 );
		outline : solid 1px var( --blue03 );
		outline-offset : -1px;
	}
	+ .contentContacts{
		margin-bottom : calc( 32 * var( --remBase ) );
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 60 * var( --remBase ) );
		padding-bottom : calc( 80 * var( --remBase ) );
		margin-top : calc( 88 * var( --remBase ) );
		margin-bottom : calc( 80 * var( --remBase ) );
		h2{
			font-size : calc( 30 * var( --remBase ) );
			line-height : calc( 46 / 30 );
		}
		.box{
			width : calc( 432 * var( --contentBase ) );
			padding-block : calc( 24 * var( --remBase ) );
			padding-inline : calc( 24 * var( --contentBase ) );
			margin-inline : auto;
			margin-top : calc( 20 * var( --remBase ) );
			border-radius : calc( 12 * var( --remBase ) );
		}
		h3{
			padding-top : calc( 12 * var( --remBase ) );
			padding-bottom : calc( 16 * var( --remBase ) );
		}
		h4{
			margin-top : calc( 16 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 28 / 20 );
		}
		ul{
			row-gap : calc( 6 * var( --remBase ) );
			column-gap : calc( 6 * 100% / 384 );
			height : calc( 330 * var( --remBase ) );
			margin-top : calc( 12 * var( --remBase ) );
			overflow-y : auto;
		}
		a{
			padding-block : calc( 8 * var( --remBase ) );
			padding-inline : calc( 16 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 28 / 18 );
			border-radius : calc( 6 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 60 * var( --remBase ) );
		padding-bottom : calc( 80 * var( --remBase ) );
		margin-block : calc( 140 * var( --remBase ) );
		h2{
			font-size : calc( 40 * var( --remBase ) );
			line-height : calc( 60 / 40 );
		}
		.box{
			width : calc( 730 * var( --contentBase ) );
			padding-block : calc( 24 * var( --remBase ) );
			padding-inline : calc( 24 * var( --contentBase ) );
			margin-inline : auto;
			margin-top : calc( 20 * var( --remBase ) );
			border-radius : calc( 12 * var( --remBase ) );
		}
		h3{
			padding-block : calc( 8 * var( --remBase ) );
		}
		h4{
			margin-top : calc( 16 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 26 / 18 );
		}
		ul{
			row-gap : calc( 6 * var( --remBase ) );
			column-gap : calc( 6 * 100% / 682 );
			margin-top : calc( 12 * var( --remBase ) );
		}
		a{
			padding-block : calc( 8 * var( --remBase ) );
			padding-inline : calc( 16 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 24 / 16 );
			border-radius : calc( 6 * var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	#area a:hover{
		color : var( --blue03 );
		background-color : #fff;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#area a{
		transition : background .3s linear , color .3s linear;
	}
}