@charset "UTF-8";

/* --------------------------------------------
FAQ
--------------------------------------------- */
#faqLinks ul{
	display : flex;
	flex-wrap : wrap;
}
#faqLinks :where( li[aria-current="page"]  , a ){
	display : grid;
	place-items : center;
	height : calc( 40 var( --remBase ) );
	padding-inline : calc( 20 var( --remBase ) );
	border-radius : 100vmax;
}
#faqLinks li[aria-current="page"]{
	color : white;
	background-color : var( --color01 );
}
#faqLinks a{
	background-color : var( --bg01 );
}
@media screen and ( width <= 750px ){
	#faqLinks{
		padding-bottom : calc( ( 34 - 16 ) var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#faqLinks ul{
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 16 var( --percentBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#faqLinks{
		margin-top : calc( 40 var( --remBase ) );
	}
	#faqLinks ul{
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 8 var( --percentBase ) );
		justify-content : center;
	}
	#faqLinks :where( li[aria-current="page"]  , a ){
		font-size : 1.6rem;
		line-height : 1.5;
	}
}
@media ( hover : hover ){
	#faqLinks a:hover{
		color : white;
		background-color : var( --color01 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#faqLinks a{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
}
@media screen and ( width <= 750px ){
	#faq{
		margin-top : calc( 34 var( --remBase ) );
		margin-bottom : calc( 80 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#faq{
		margin-top : calc( 40 var( --remBase ) );
		margin-bottom : calc( 94 var( --remBase ) );
	}
}

/* --------------------------------------------
EXAMPLE
--------------------------------------------- */
#examples hgroup{
	margin-top : calc( 8 var( --remBase ) );
}
#examples hgroup p{
	margin-top : calc( 8 var( --remBase ) );
}
#examples .pagination{
	margin-top : calc( 78 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	#examples{
		margin-bottom : calc( 40 var( --remBase ) );
	}
	#examples ul{
		margin-top : calc( 36 var( --remBase ) );
	}
	#examples li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#examples picture img{
		width : 100%;
		height : auto;
	}
}
@media print , screen and ( width > 750px ){
	#examples{
		margin-top : calc( 16 var( --remBase ) );
		margin-bottom : calc( 80 var( --remBase ) );
	}
	#examples > p{
		margin-top : calc( 48 var( --remBase ) );
	}
	#examples ul{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 440 var( --percentBase ) ) );
		row-gap : calc( 54 var( --remBase ) );
		align-items : start;
		justify-content : space-between;
		margin-top : calc( 72 var( --remBase ) );
	}
	#examples picture{
		width : 100%;
		height : calc( 293.33 var( --remBase ) );
	}
	#examples picture img{
		width : 100%;
		height : 100%;
		object-fit : cover;
		object-position : center;
	}
}

/* --------------------------------------------
NEWS
--------------------------------------------- */
@media print , screen and ( width > 750px ){
	#column01:has( #news ){
		margin-block : calc( 80 var( --remBase ) );
	}
}
#news li{
	border-bottom : solid 1px #cfd2d9;
}
#news li a{
	display : grid;
	align-items : start;
}
#news time{
	grid-row : 1;
	grid-column : 1;
	font-family : Lato , system-ui;
	font-size : 1.6rem;
	line-height : 1.5;
}
#news .category{
	display : grid;
	grid-row : 1;
	grid-column : 2;
	place-items : center;
	font-family : "Noto Sans JP" , sans-serif;
	color : white;
}
#news h2{
	font-weight : 400;
}
@media screen and ( width <= 750px ){
	#news{
		margin-top : calc( 42 var( --remBase ) );
	}
	#news li{
		padding-bottom : calc( 18 var( --remBase ) );
	}
	#news li + li{
		padding-top : calc( 18 var( --remBase ) );
	}
	#news li a{
		grid-template-columns : calc( 95 var( --percentBase ) ) auto 1fr;
		row-gap : calc( 7 var( --remBase ) );
	}
	#news time{
		padding-top : calc( 6 var( --remBase ) );
	}
	#news .category{
		height : calc( 36 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.3;
	}
	#news h2{
		grid-row : 2;
		grid-column : 1/4;
		font-family : "Noto Sans JP" , sans-serif;
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#news .pagination{
		margin-top : calc( 48 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#news li{
		padding-bottom : calc( 18 var( --remBase ) );
	}
	#news li + li{
		padding-top : calc( 18 var( --remBase ) );
	}
	#news li a{
		grid-template-columns : repeat( 2 , calc( 120 * 100% / 1040 ) ) 1fr;
	}
	#news time{
		padding-top : calc( 5 var( --remBase ) );
	}
	#news .category{
		height : calc( 34 var( --remBase ) );
		font-size : 1.2rem;
		line-height : 1.5;
	}
	#news h2{
		grid-row : 1;
		grid-column : 3;
		padding-inline : calc( 8 * 100% / 800 );
		padding-top : calc( 3.4 var( --remBase ) );
	}
	#news .pagination{
		margin-top : calc( 80 var( --remBase ) );
	}
}

/* --------------------------------------------
COLUMN
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#column01:has( #column ){
		margin-top : calc( 28 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#column01:has( #column ){
		margin-top : calc( 78 var( --remBase ) );
		margin-bottom : calc( 84 var( --remBase ) );
	}
}
#column{
	font-family : "Noto Sans JP";
}
#column li > a > div{
	display : grid;
	grid-template-columns : auto 1fr;
}
#column .category{
	display : grid;
	place-items : center;
	height : calc( 26 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	font-size : 1.4rem;
	line-height : 1.3;
	color : white;
}
#column time{
	padding-top : calc( 1 var( --remBase ) );
	font-size : 1.6rem;
	line-height : 1.5;
}
#column .tags{
	display : flex;
	flex-wrap : wrap;
	row-gap : calc( 8 var( --remBase ) );
	padding-top : calc( 8 var( --remBase ) );
	border-top : solid 1px #cfd2d9;
}
#column .tags li{
	display : grid;
	place-items : center;
	height : calc( 24 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	font-size : 1.2rem;
	line-height : 1.3;
	background-color : #f1f2ed;
	border-radius : calc( 6 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	#column > ul > li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#column picture{
		width : 100%;
	}
	#column picture img{
		width : 100%;
		height : auto;
	}
	#column h2{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 2rem;
		font-weight : 700;
		line-height : 1.3;
	}
	#column li > a > div{
		column-gap : calc( 8 var( --percentBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	#column .category{
		column-gap : calc( 8 var( --percentBase ) );
	}
	#column .pagination{
		margin-top : calc( 78 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#column > ul{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 320 * 100% / 1040 ) );
		row-gap : calc( 40 var( --remBase ) );
		justify-content : space-between;
	}
	#column > ul > li{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 4;
		row-gap : calc( 8 var( --remBase ) );
	}
	#column > ul > li > a{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 4;
		row-gap : calc( 8 var( --remBase ) );
	}
	#column picture{
		grid-row : 1;
		width : 100%;
		height : calc( 180 var( --remBase ) );
	}
	#column picture img{
		width : 100%;
		height : 100%;
		object-fit : cover;
		object-position : center;
	}
	#column h2{
		grid-row : 2;
		font-size : 1.6rem;
		font-weight : 400;
		line-height : 1.5;
	}
	#column li > a > div{
		grid-row : 3;
		column-gap : calc( 8 * 100% / 320 );
	}
	#column .tags{
		grid-row : 4;
		column-gap : calc( 8 * 100% / 320 );
	}
	#column .pagination{
		margin-top : calc( 68 var( --remBase ) );
	}
}