@charset "UTF-8";

/* --------------------------------------------
COMMON
--------------------------------------------- */
#paginationSingle ul{
	display : grid;
	align-items : center;
}
#paginationSingle ul a{
	display : grid;
	grid-row : 1;
	place-items : center;
	width : 100%;
	height : 100%;
}
#paginationSingle ul .archive{
	grid-column : 2;
}
#paginationSingle ul :where( .prev , .next ){
	aspect-ratio : 1;
}
#paginationSingle ul .prev{
	grid-column : 1;
}
#paginationSingle ul .next{
	grid-column : 3;
}
#paginationSingle ul{
	grid-auto-rows : calc( 40 var( --remBase ) );
	justify-content : center;
}
#paginationSingle li{
	height : 100%;
}
#paginationSingle .archive > a{
	aspect-ratio : 119 / 40;
	background-color : white;
	border : solid 1px #c4c4c4;
}
#paginationSingle :where( .prev , .next ) a{
	background-color : var( --color01 );
	border-color : var( --color01 );
}
#paginationSingle :where( .prev , .next ) a img{
	height : calc( 14 var( --remBase ) );
	filter : var( --filterWhite );
}
@media screen and ( width <= 750px ){
	#paginationSingle{
		margin-top : calc( 114 var( --remBase ) );
	}
	#paginationSingle ul{
		grid-template-columns : calc( 40 var( --percentBase ) ) calc( 120 var( --percentBase ) ) calc( 40 var( --percentBase ) );
		column-gap : calc( 16 var( --percentBase ) );
	}
	#paginationSingle .archive a{
		font-size : 1.4rem;
		line-height : 1.7;
	}
}
@media screen and ( width > 750px ) , print{
	#paginationSingle ul{
		grid-template-columns : calc( 40 * 100% / 1360 ) calc( 120 * 100% / 1360 ) calc( 40 * 100% / 1360 );
		column-gap : calc( 16 * 100% / 1360 );
	}
	#paginationSingle .archive a{
		font-size : 1.8rem;
		font-weight : 500;
		line-height : 1.3;
	}
}
@media ( hover : hover ){
	#paginationSingle li:not( .prev , .next ) a:hover{
		color : white;
		background-color : var( --color01 );
		border-color : var( --color01 );
	}
	#paginationSingle :where( .prev , .next ) a:hover{
		background-color : white;
	}
	#paginationSingle :where( .prev , .next ) a:hover img{
		filter : var( --filterColor01 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#paginationSingle li:not( .prev , .next ) a{
		transition : color var( --transitionBase ) , background-color var( --transitionBase ) , border-color var( --transitionBase );
	}
	#paginationSingle :where( .prev , .next ) a{
		transition : background-color var( --transitionBase );
	}
	#paginationSingle :where( .prev , .next ) a img{
		transition : filter var( --transitionBase );
	}
}

/* --------------------------------------------
NEWS OR BLOG
--------------------------------------------- */
:where( #news , #blog ) .head{
	color : white;
	background-color : var( --color01 );
}
:where( #news , #blog ) .head time{
	display : block;
}
:where( #news , #blog ) .head h1{
	font-weight : 500;
	line-height : 1.3;
	letter-spacing : .1em;
}
:where( #news , #blog ) #content{
	border-bottom : solid 1px #cfd2d9;
}
@media screen and ( width <= 750px ){
	:where( #news , #blog ) .head{
		padding-block : calc( 24 var( --remBase ) );
		padding-inline : calc( 16 var( --percentBase ) );
	}
	:where( #news , #blog ) .head time{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	:where( #news , #blog ) .head h1{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 2.4rem;
	}
	:where( #news , #blog ) #content{
		padding-bottom : calc( 40 var( --remBase ) );
		margin-top : calc( ( 24 - 10 ) var( --remBase ) );
		border-bottom : solid 1px #cfd2d9;
	}
	:where( #news , #blog ) #paginationSingle{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	:where( #news , #blog ) .head{
		padding-block : calc( 24 var( --remBase ) );
		padding-inline : calc( 24 * 100% / 1360 );
	}
	:where( #news , #blog ) .head time{
		font-size : 2rem;
		line-height : 2;
	}
	:where( #news , #blog ) .head h1{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 3.2rem;
	}
	:where( #news , #blog ) .categories{
		display : flex;
		flex-wrap : wrap;
		column-gap : calc( 40 * 100% / 1360 );
		margin-top : calc( 24 var( --remBase ) );
	}
	:where( #news , #blog ) .categories > div{
		display : grid;
		grid-template-columns : auto auto;
		align-items : start;
		justify-content : start;
	}
	:where( #news , #blog ) .categories dt , :where( #news , #blog ) .categories a{
		font-size : 2rem;
		line-height : 2;
	}
	:where( #news , #blog ) .categories ul{
		display : flex;
		flex-wrap : wrap;
	}
	:where( #news , #blog ) .categories li:not( :last-child )::after{
		font-size : 2rem;
		line-height : 2;
		content : ",";
	}
	:where( #news , #blog ) #content{
		padding-top : calc( 10 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
		margin-top : calc( ( 16 - 10 ) var( --remBase ) );
		border-top : solid 1px #989898;
	}
	:where( #news , #blog ) #paginationSingle{
		margin-top : calc( 80 var( --remBase ) );
	}
}
#content :where( h2 , h3 , h4 , h5 , h6 ){
	font-family : "Noto Sans JP" , sans-serif;
}
#content h2{
	margin-top : calc( 34 var( --remBase ) );
	font-size : 2.4rem;
	font-weight : 500;
	color : var( --color01 );
}
#content :where( p , ul , ol ){
	margin-top : calc( 10 var( --remBase ) );
}
#content p , #content li{
	line-height : 2;
}
#content ul > li{
	display : grid;
	grid-template-columns : auto auto;
	align-items : start;
	justify-content : start;
}
#content ul > li::before{
	content : "・";
}
@media screen and ( width <= 750px ){
	#content p , #content li{
		font-size : 1.4rem;
	}
	#content h2{
		line-height : 1.3;
	}
	#content img{
		max-width : 100%;
		height : auto;
	}
}
@media screen and ( width > 750px ) , print{
	#content p , #content li{
		font-size : 2rem;
	}
	#content h2{
		line-height : 2;
	}
}