@charset "UTF-8";

/* --------------------------------------------
ARCHIVE MODULES
--------------------------------------------- */
.list-archive01 h2 , .list-archive01 h3{
	margin-top : calc( 8 var( --remBase ) );
	font-size : 2rem;
	font-weight : 700;
	line-height : 1.3;
}
.list-archive01 ul{
	display : flex;
	flex-wrap : wrap;
	row-gap : calc( 8 var( --remBase ) );
	margin-top : calc( 8 var( --remBase ) );
}
.list-archive01 ul li{
	display : grid;
	place-items : center;
	height : calc( 26 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	font-size : 1.4rem;
	line-height : 1.3;
	color : white;
}
@media screen and ( width <= 750px ){
	.list-archive01 > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	.list-archive01 picture img{
		width : 100%;
		height : auto;
	}
	.list-archive01 ul{
		column-gap : calc( 8 var( --percentBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.list-archive01{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 440 var( --percentBase ) ) );
		row-gap : calc( 40 var( --remBase ) );
		justify-content : space-between;
	}
	.list-archive01 > li , .list-archive01 a , .list-archive01 section{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 3;
		row-gap : 0;
	}
	.list-archive01 picture{
		grid-row : 1;
		height : calc( 330 var( --remBase ) );
	}
	.list-archive01 picture img{
		width : 100%;
		height : 100%;
		object-fit : cover;
		object-position : center;
	}
	.list-archive01 ul{
		column-gap : calc( 8 * 100% / 440 );
	}
}
#pagination{
	position : relative;
	left : 50%;
	display : inline-grid;
	grid-template-rows : 100%;
	grid-auto-flow : column;
	translate : -50% 0;
}
#pagination a , #pagination span{
	display : grid;
	place-items : center;
	width : auto;
	aspect-ratio : 1;
}
#pagination :where( .prev , .next ){
	position : absolute;
}
#pagination a , #pagination span{
	height : calc( 40 var( --remBase ) );
	overflow : hidden;
	font-weight : 500;
	color : #333;
	border-radius : 50%;
}
#pagination :where( .prev , .next ){
	background-color : var( --base );
}
#pagination :where( .prev , .next ) img{
	height : calc( 14 var( --remBase ) );
	filter : var( --filterWhite );
}
#pagination span[aria-current="page"]{
	background-color : var( --yellow );
}
#pagination .prev{
	left : calc( -48 var( --remBase ) );
}
#pagination .next{
	right : calc( -48 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	#pagination{
		column-gap : calc( 8 var( --percentBase ) );
	}
	#pagination a , #pagination span{
		font-size : 1.4rem;
	}
}
@media print , screen and ( width > 750px ){
	#pagination{
		column-gap : calc( 8 var( --remBase ) );
	}
	#pagination a , #pagination span{
		font-size : 1.6rem;
	}
}
@media ( hover : hover ){
	#pagination a:hover:not( .prev , .next ){
		background-color : var( --yellow );
	}
	#pagination a:hover.prev , #pagination a:hover.next{
		background-color : white;
	}
	#pagination a:hover.prev img , #pagination a:hover.next img{
		filter : var( --filterBase );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#pagination a{
		transition : background-color var( --transitionBase );
	}
	#pagination a.prev img , #pagination a.next img{
		transition : filter var( --transitionBase );
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#faq{
		padding-bottom : calc( 115 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#faq{
		padding-bottom : calc( 80 var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#faq summary{
		column-gap : calc( 18 var( --percentBase ) );
	}
	#faq summary span{
		font-size : 1.6rem;
	}
	#faq .detailsContent{
		margin-left : calc( 80 var( --percentBase ) );
	}
	#faq .detailsContent > div{
		column-gap : calc( 18 * 100% / 1320 );
	}
}

/* --------------------------------------------
CASES
INTERVIEWS
--------------------------------------------- */
:where( #cases , #interviews ) #pagination{
	margin-top : calc( 80 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	:where( #cases , #interviews ) .list-archive01{
		margin-top : calc( 34 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	:where( #cases , #interviews ) .list-archive01{
		margin-top : calc( 40 var( --remBase ) );
	}
}

/* --------------------------------------------
NEWS
COLUMN
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:where( #news , #column ) #pagination{
		margin-top : calc( 48 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	:where( #news , #column ) #pagination{
		margin-top : calc( 88 var( --remBase ) );
	}
}