@charset "UTF-8";

/* --------------------------------------------
WORKS
--------------------------------------------- */
#works{
	footer{
		h2{
			padding-block : calc( 10 * var( --remBase ) );
			font-size : calc( 24 * var( --remBase ) );
			font-weight : 500;
			line-height : calc( 29 / 24 );
		}
		dl{
			display : flex;
			flex-wrap : wrap;
		}
		dt{
			font-size : calc( 14 * var( --remBase ) );
			font-weight : 400;
			line-height : calc( 17 / 14 );
			letter-spacing : .1em;
		}
		dd{
			font-size : calc( 16 * var( --remBase ) );
			line-height : 2.25;
		}
	}
	@media screen and ( width <= 768px ){
		footer{
			margin-top : calc( 120 * var( --remBase ) );
			h2{
				padding-inline : calc( 10 * var( --contentBase ) );
			}
			dl{
				row-gap : calc( 10 * var( --remBase ) );
				padding-block : calc( 10 * var( --remBase ) );
				padding-inline : calc( 10 * var( --contentBase ) );
				margin-top : calc( 72 * var( --remBase ) );
				> div:not( [class] ) , > div.column01-sp{
					width : 100%;
				}
				> div.column02-sp{
					width : 50%;
				}
			}
			dd{
				margin-top : calc( 5 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
				line-height : 2.25;
			}
		}
		#pagination{
			margin-top : calc( 10 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		footer{
			margin-top : calc( 142 * var( --remBase ) );
			h2{
				padding-inline : calc( 10 * 100% / 800 );
			}
			dl{
				display : flex;
				flex-wrap : wrap;
				row-gap : calc( 15 * var( --remBase ) );
				padding-inline : calc( 10 * 100% / 800 );
				margin-top : calc( 142 * var( --remBase ) );
				> div.column01-pc{
					width : 100%;
				}
				> div:not( [class] ) , > div.column02-pc{
					width : 50%;
				}
				> div.column03-pc{
					width : calc( 100% / 3 );
				}
			}
			dt , dd{
				padding-block : calc( 10 * var( --remBase ) );
			}
			dd{
				margin-top : calc( 2 * var( --remBase ) );
			}
		}
		#pagination{
			margin-top : calc( 40 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
NEWS
--------------------------------------------- */
#news{
	#content{
		display : grid;
		grid-template-columns : 1fr;
		grid-auto-flow : row;
		figure{
			img{
				width : 100%;
				height : auto;
			}
		}
	}
	@media screen and ( width <= 768px ){
		#content{
			row-gap : calc( 30 * var( --remBase ) );
			padding-top : calc( 30 * var( --remBase ) );
			padding-bottom : calc( 10 * var( --remBase ) );
			&::after{
				display : block;
				width : calc( 300 * var( --contentBase ) );
				height : 0;
				margin-inline : auto;
				margin-top : calc( 30 * var( --remBase ) );
				content : "";
				border-top : solid 1px var( --base );
			}
			p{
				padding-inline : calc( 10 * var( --contentBase ) );
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 30 / 16 );
			}
		}
		#pagination{
			margin-top : calc( 205 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		#content{
			row-gap : calc( 30 * var( --remBase ) );
			padding-block : calc( 30 * var( --remBase ) );
			padding-inline : calc( 10 * 100% / 820 );
			border-bottom : solid 1px var( --base );
			p{
				font-size : calc( 20 * var( --remBase ) );
				line-height : 2;
			}
		}
		#pagination{
			padding-inline : calc( 10 * 100% / 820 );
			margin-top : calc( 230 * var( --remBase ) );
		}
		&::after{
			display : block;
			width : auto;
			height : calc( 186 * var( --remBase ) );
			aspect-ratio : 300 / 112;
			margin-inline : auto;
			margin-top : calc( 80 * var( --remBase ) );
			content : "";
			background : url( "../images/circle.svg" ) center / contain no-repeat;
		}
	}
}