@charset "UTF-8";

/*--------------------------------------------
COMMON
---------------------------------------------*/

#pagination{
	position : relative;
	content-visibility : auto;
}

#pagination a{
	font-weight : 500;
	border-bottom-style : solid;
	border-bottom-color : currentColor;
	display : block;
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
	position : absolute;
	top : 0;
}

@media screen and (max-width: 768px){
	#pagination{
		contain-intrinsic-size : calc( ( 28 + 3.5 + 17.5 ) * 100vw / 768 );
		height : calc( ( 28 + 3.5 + 17.5 ) * 100vw / 768 );
	}
	#pagination a{
		font-size : 2.8rem;
		border-bottom-width : calc( 3 * 100vw / 768 );
		width : calc( 200 * 100% / 720 );
		padding-bottom : calc( ( 21 - 3.5 ) * 100vw / 768 );
	}
	#pagination .prev{
		left : calc( 147 * 100% / 720 );
	}
	#pagination .next{
		right : calc( 147 * 100% / 720 );
	}
}

@media print,screen and (min-width: 769px){
	#pagination{
		contain-intrinsic-size : calc( 16px + 2px + 9px );
		height : calc( 16px + 2px + 9px );
	}
	#pagination a{
		font-size : 1.6rem;
		border-bottom-width : 2px;
		width : 150px;
		padding-bottom : calc( 11px - 2px );
	}
	#pagination .prev{
		right : calc( 50% + 11px );
	}
	#pagination .next{
		left : calc( 50% + 11px );
	}
}

#news , #contract{
	background-color : #bbc6c8;
	background-position : center top;
	background-repeat : repeat-y;
}

@media screen and (max-width: 768px){
	#news , #contract{
		background-size : 100% auto;
		background-position : 0 0;
		background-image : url("../images/ui/bg/pattern01_sp.png");
	}
}

@media print,screen and (min-width: 769px){
	#news , #contract{
		background-position : center top;
		background-image : url("../images/ui/bg/pattern01_pc.jpg");
	}
}

/*--------------------------------------------
NEWS
---------------------------------------------*/

@media screen and (max-width: 768px){
	.title-news:after{
		background-image : url("../images/news/bg_title_sp.jpg");
	}
}

@media print,screen and (min-width: 769px){
	.title-news:after{
		background-image : url("../images/news/bg_title_pc.jpg");
	}
}

#news ul{
	background-color : #e5f6f8;
}

#news li a{
	display : flex;
	align-items : flex-start;
}

#news time{
	letter-spacing : .1em;
}

#news .category{
	display : flex;
	align-items : center;
	justify-content : center;
	color : #fff;
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
}

#news .category.topics{
	background-color : #900;
}

#news h2{
	letter-spacing : .1em;
}

@media screen and (max-width: 768px){
	#news{
		padding-top : calc( 64 * 100vw / 768 );
		padding-bottom : calc( 115 * 100vw / 768 );
	}
	#news ul{
		padding-top : calc( ( 36 - 5 ) * 100vw / 768 );
		padding-bottom : calc( 71 * 100vw / 768 );
		padding-left : calc( 24 * 100% / 720 );
		padding-right : calc( 24 * 100% / 720 );
	}
	#news li{
		border-bottom : calc( 3 * 100vw / 768 ) dashed rgba(0,0,0,.3);
	}
	#news li a{
		padding-top : calc( 31 * 100vw / 768 );
		padding-bottom : calc( ( 35 - 3.9 ) * 100vw / 768 );
		flex-wrap : wrap;
	}
	#news time{
		font-size : 2.6rem;
		width : calc( 197 * 100% / 672 );
		margin-top : calc( 9.5 * 100vw / 768 );
	}
	#news .category{
		width : calc( 240 * 100% / 672 );
		height : calc( 45 * 100vw / 768 );
		font-size : 2.6rem;
	}
	#news h2{
		flex-shrink : 0;
		width : 100%;
	}
	#news h2{
		font-size : 2.6rem;
		line-height : 1.29;
	}
	#news h2{
		margin-top : calc( ( 24 - 3.9 ) * 100vw / 768 );
	}
	#news #pagination{
		margin-top : calc( ( 80 - 3.5 ) * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#news{
		padding-top : 37px;
		padding-bottom : 97px;
	}
	#news ul{
		padding-top : 45px;
		padding-bottom : calc( 66px - 3px );
		padding-left : 30px;
		padding-right : 30px;
	}
	#news li + li{
		margin-top : calc( 41px - 3px );
	}
	#news time{
		flex-shrink : 0;
		font-size : 1.8rem;
		width : 137px;
		margin-top : 11px;
	}
	#news .category{
		width : 183px;
		height : 40px;
		font-size : 1.8rem;
		flex-shrink : 0;
	}
	#news h2{
		font-size : 1.8rem;
		line-height : 1.33;
	}
	#news h2{
		padding-left : 19px;
		flex-grow : 1;
		margin-top : calc( 6px - 3px );
	}
	#news #pagination{
		margin-top : calc( 64px - 2px );
	}
}

/*--------------------------------------------
CONTRACT
---------------------------------------------*/

@media screen and (max-width: 768px){
	#title.title-contract:after{
		background-image : url("../images/contract/bg_title_sp.jpg");
	}
}

@media print,screen and (min-width: 769px){
	#title.title-contract:after{
		background-image : url("../images/contract/bg_title_pc.jpg");
		left : calc( 50% + 14px );
	}
}

#contract ul{
	display : flex;
	flex-wrap : wrap;
}

#contract li a{
	display : block;
}

#contract picture{
	overflow : hidden;
}

#contract picture > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	font-family : "object-fit: cover;";
}

#contract picture{
	width : 100%;
}

#contract h2{
	font-weight : 500;
	letter-spacing : .1em;
}

@media screen and (max-width: 768px){
	#contract{
		padding-top : calc( 70 * 100vw / 768 );
		padding-bottom : calc( 95 * 100vw / 768 );
	}
	#contract ul{
		padding-left : calc( 24 * 100% / 720 );
		padding-right : calc( 24 * 100% / 720 );
		justify-content : space-between;
	}
	#contract li{
		width : calc( 324 * 100% / 672 );
	}
	#contract li:nth-child(n+3){
		margin-top : calc( ( 55 - 3.9 ) * 100vw / 768 );
	}
	#contract picture{
		height : calc( 244 * 100vw / 768 );
	}
	#contract h2{
		font-size : 2.6rem;
		line-height : 1.29;
	}
	#contract h2{
		margin-top : calc( ( 20 - 3.9 ) * 100vw / 768 );
	}
	#contract #pagination{
		margin-top : calc( ( 86 - 3.9 - 3.5 ) * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#contract{
		padding-top : 40px;
		padding-bottom : 97px;
	}
	#contract li{
		width : 250px;
	}
	#contract li:not(:nth-child(4n+1)){
		margin-left : 20px;
	}
	#contract li:nth-child(n+5){
		margin-top : calc( 50px - 3px );
	}
	#contract picture{
		height : 188px;
	}
	#contract h2{
		margin-top : calc( 16px - 3px );
	}
	#contract h2{
		font-size : 1.8rem;
		line-height : 1.33;
	}
	#contract #pagination{
		margin-top : calc( 85px - 3px - 2px );
	}
}