@charset "UTF-8";

/* --------------------------------------------
COMMON
--------------------------------------------- */
#pagination{
	overflow-x : clip;
}
#pagination ul{
	position : relative;
	left : 50%;
	display : inline-grid;
	grid-auto-flow : column;
	translate : -50% 0;
}
#pagination ul a , #pagination ul span{
	display : grid;
	place-items : center;
	width : 100%;
	height : 100%;
	aspect-ratio : 1;
}
#pagination ul :where( .prev , .next ){
	position : absolute;
	height : 100%;
}
#pagination li > :where( a , span[aria-current] ){
	border-width : 1px;
}
#pagination li:not( :has( .prev , .next ) ) a , #pagination span{
	font-weight : 500;
}
#pagination li:not( .prev , .next ) > a{
	background-color : white;
	border-color : #c4c4c4;
}
#pagination span[aria-current]{
	color : white;
	background-color : var( --color01 );
	border-color : var( --color01 );
}
#pagination :where( .prev , .next ) a{
	background-color : var( --color01 );
	border-color : var( --color01 );
}
#pagination :where( .prev , .next ) a img{
	filter : var( --filterWhite );
}
@media screen and ( width <= 750px ){
	#pagination ul{
		grid-auto-rows : calc( 40 var( --remBase ) );
		column-gap : calc( 8 var( --remBase ) );
	}
	#pagination li:not( :has( .prev , .next ) ) a , #pagination span{
		font-size : 1.6rem;
	}
	#pagination :where( .prev , .next ) img{
		height : calc( 14 var( --remBase ) );
	}
	#pagination .prev{
		left : calc( -48 var( --remBase ) );
	}
	#pagination .next{
		right : calc( -48 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#pagination ul{
		grid-auto-rows : calc( 40 var( --remBase ) );
		column-gap : calc( 8 var( --remBase ) );
	}
	#pagination li:not( :has( .prev , .next ) ) a , #pagination span{
		font-size : 1.6rem;
	}
	#pagination :where( .prev , .next ) img{
		height : calc( 14 var( --remBase ) );
	}
	#pagination .prev{
		left : calc( -48 var( --remBase ) );
	}
	#pagination .next{
		right : calc( -48 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#pagination li:not( .prev , .next ) a:hover{
		color : white;
		background-color : var( --color01 );
		border-color : var( --color01 );
	}
	#pagination :where( .prev , .next ) a:hover{
		background-color : white;
	}
	#pagination :where( .prev , .next ) a:hover img{
		filter : var( --filterColor01 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#pagination li:not( .prev , .next ) a{
		transition : color var( --transitionBase ) , background-color var( --transitionBase ) , border-color var( --transitionBase );
	}
	#pagination :where( .prev , .next ) a{
		transition : background-color var( --transitionBase );
	}
	#pagination :where( .prev , .next ) a img{
		transition : filter var( --transitionBase );
	}
}

/* --------------------------------------------
NEWS
--------------------------------------------- */
#news h2{
	font-weight : 500;
	line-height : 1.3;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#news > ul > li > a{
	display : block;
	border-bottom : solid 1px #cfd2d9;
}
#news time{
	display : block;
}
#news h3{
	margin-top : calc( 8 var( --remBase ) );
	font-weight : 600;
	line-height : 1.3;
	color : var( --color01 );
	letter-spacing : .1em;
}
#news p{
	line-height : 2;
}
@media screen and ( width <= 750px ){
	#news h2{
		font-size : 3.2rem;
	}
	#news > ul{
		margin-top : calc( 24 var( --remBase ) );
	}
	#news > ul > li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#news > ul > li > a{
		padding-bottom : calc( 24 var( --remBase ) );
	}
	#news time{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#news h3{
		font-size : 2rem;
	}
	#news p{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
	}
	#news #pagination{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#news h2{
		font-size : 4.8rem;
	}
	#news > ul{
		margin-top : calc( 80 var( --remBase ) );
	}
	#news > ul > li + li{
		margin-top : calc( 80 var( --remBase ) );
	}
	#news > ul > li > a{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#news time{
		font-size : 2rem;
		line-height : 2;
	}
	#news h3{
		font-size : 3.2rem;
	}
	#news p{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 2rem;
	}
	#news #pagination{
		margin-top : calc( 80 var( --remBase ) );
	}
}

/* --------------------------------------------
NEWS
--------------------------------------------- */
#blog h2{
	font-weight : 500;
	line-height : 1.3;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#blog li a > div{
	display : grid;
	align-items : center;
	justify-content : start;
}
#blog li a > div ul{
	display : grid;
	grid-auto-flow : column;
	align-items : start;
	justify-content : start;
}
#blog li a > div li{
	display : grid;
	place-items : center;
	height : 100%;
	color : white;
}
#blog li a > div .kitazono{
	background-color : var( --color01 );
}
#blog li a > div .seiseki{
	background-color : #d66484;
}
#blog li a > div .ichikawa{
	background-color : #e5274d;
}
#blog picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#blog time{
	display : block;
}
#blog h3{
	font-weight : 600;
	line-height : 1.3;
	color : var( --color01 );
	letter-spacing : .1em;
}
#blog p{
	line-height : 2;
}
@media screen and ( width <= 750px ){
	#blog h2{
		font-size : 3.2rem;
	}
	#blog > ul{
		margin-top : calc( 24 var( --remBase ) );
	}
	#blog > ul > li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#blog > ul > li > a{
		display : block;
		padding-bottom : calc( 24 var( --remBase ) );
		border-bottom : solid 1px #d9d9d9;
	}
	#blog picture{
		width : calc( 240 var( --percentBase ) );
		height : calc( 240 var( --remBase ) );
		margin-inline : auto;
	}
	#blog li > a > div{
		grid-template-columns : calc( 80 var( --percentBase ) ) 1fr;
		margin-top : calc( 10 var( --remBase ) );
	}
	#blog li > a > div time , #blog li > a > div li{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#blog li > a > div ul{
		grid-auto-rows : calc( 25 var( --remBase ) );
		grid-auto-columns : calc( 44 * 100% / 288 );
	}
	#blog h3{
		margin-top : calc( 4 var( --remBase ) );
		font-size : 2rem;
	}
	#blog li > a > p{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 2;
	}
	#blog #pagination{
		margin-top : calc( 43 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#blog h2{
		font-size : 4.8rem;
	}
	#blog > ul{
		margin-top : calc( 80 var( --remBase ) );
	}
	#blog > ul > li + li{
		margin-top : calc( 80 var( --remBase ) );
	}
	#blog > ul > li > a{
		display : grid;
		grid-template-rows : calc( 44 var( --remBase ) ) calc( 16 var( --remBase ) ) auto calc( 16 var( --remBase ) ) auto 1fr;
		grid-template-columns : calc( 280 * 100% / 1360 ) 1fr;
		column-gap : calc( 40 * 100% / 1360 );
	}
	#blog picture{
		grid-row : 1 / -1;
		grid-column : 1;
		height : calc( 280 var( --remBase ) );
	}
	#blog li > a > div{
		grid-template-columns : calc( 119 * 100% / 1040 ) 1fr;
		grid-row : 1;
		grid-column : 2;
	}
	#blog li > a > div time , #blog li > a > div li{
		font-size : 2rem;
		line-height : 2;
	}
	#blog li > a > div ul{
		grid-auto-rows : calc( 40 var( --remBase ) );
		grid-auto-columns : calc( 72 * 100% / 921 );
	}
	#blog h3{
		grid-row : 3;
		grid-column : 2;
		font-size : 3.2rem;
	}
	#blog li > a > p{
		grid-row : 5/7;
		grid-column : 2;
		font-size : 2rem;
		line-height : 2;
	}
	#blog #pagination{
		margin-top : calc( 80 var( --remBase ) );
	}
}