@charset "UTF-8";

/* --------------------------------------------
WORKS
--------------------------------------------- */
#works{
	> ul{
		justify-content : space-between;
		li{
			position : relative;
		}
		li , article{
			width : 100%;
			height : 100%;
		}
	}
	picture{
		width : 100%;
		height : 100%;
		img{
			width : 100%;
			height : 100%;
			aspect-ratio: 1 / 1;
			object-fit : cover;
			object-position : center;
		}
	}
	h2{
		position : absolute;
		left : 0;
		width : 100%;
		font-weight : 500;
		text-align : center;
		opacity : 0;
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 30 * var( --remBase ) );
		padding-bottom : calc( 20 * var( --remBase ) );
		> ul{
			display : grid;
			grid-template-rows : calc( 150 * var( --remBase ) );
			grid-template-columns : repeat( 2 , calc( 150 * var( --contentBase ) ) );
			row-gap : calc( 20 * var( --remBase ) );
			padding-block : calc( 10 * var( --remBase ) );
			margin-top : calc( 26 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-inline : max( calc( ( 100% - 1116px ) / 2 ) , calc( 56 * var( --viewportBase ) ) );
		padding-top : calc( 70 * var( --remBase ) );
		padding-bottom : calc( 83.5 * var( --remBase ) );
		> ul{
			display : grid;
			grid-template-rows : calc( 332 * var( --remBase ) );
			grid-template-columns : repeat( 3 , calc( 332 * 100% / 1116 ) );
			row-gap : calc( 60 * var( --remBase ) );
			margin-top : calc( 47 * var( --remBase ) );
		}
		h2{
			bottom : calc( 10 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
			line-height : 2;
		}
	}
}
@media ( hover : hover ){
	#works > ul > li > a:hover{
		h2{
			opacity : 1;
		}
    img{
      opacity: .7;
    }
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#works{
    h2{
		  transition : opacity var( --transitionBase );
	  }
    img{
      transition : opacity var( --transitionBase );
    }
  }
}

/* --------------------------------------------
NEWS
--------------------------------------------- */
#news{
	> ul{
		a{
			display : block;
		}
	}
	time{
		display : block;
		padding-block : calc( 10 * var( --remBase ) );
		font-family : Barlow , sans-serif;
		font-size : calc( 16 * var( --remBase ) );
		line-height : calc( 19 / 16 );
	}
	h2{
		padding-block : calc( 10 * var( --remBase ) );
		margin-top : calc( 20 * var( --remBase ) );
		font-weight : 500;
	}
	> ul{
		> li{
			border-bottom : solid 1px var( --base );
			&:first-child{
				border-top : solid 1px var( --base );
			}
		}
		span{
			display : block;
			align-content : center;
			padding-block : calc( 10 * var( --remBase ) );
			margin-top : calc( 20 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 19 / 16 );
		}
	}
	#more{
		display : block;
		width : 100%;
		font-weight : 500;
		text-align : center;
		&::after{
			display : block;
			width : auto;
			aspect-ratio : 19 / 11;
			margin-inline : auto;
			content : "";
			background : url( "../images/ui/arrow/down01.svg" ) center top / contain no-repeat;
		}
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 30 * var( --remBase ) );
		padding-bottom : calc( 20 * var( --remBase ) );
		.title01 , > ul{
			padding-inline : calc( 10 * var( --contentBase ) );
		}
		> ul{
			padding-block : calc( 10 * var( --remBase ) );
			margin-top : calc( 20 * var( --remBase ) );
			a{
				padding-block : calc( 40 * var( --remBase ) );
			}
		}
		h2{
			font-size : calc( 22 * var( --remBase ) );
			line-height : calc( 32 / 22 );
		}
		#more{
			margin-top : calc( 16 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 30 / 14 );
			&::after{
				height : calc( 9 * var( --remBase ) );
				margin-top : calc( 10 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		padding-inline : max( calc( ( 100% - 800px ) / 2 ) , calc( 214 * var( --viewportBase ) ) );
		padding-top : calc( 70 * var( --remBase ) );
		padding-bottom : calc( 137 * var( --remBase ) );
		.title01{
			padding-inline : calc( 10 * 100% / 800 );
		}
		> ul{
			margin-top : calc( 47 * var( --remBase ) );
			a{
				padding-block : calc( 30 * var( --remBase ) );
				padding-inline : calc( 10 * 100% / 800 );
			}
		}
		h2{
			font-size : calc( 20 * var( --remBase ) );
			line-height : 1.2;
		}
	}
}