@charset "UTF-8";

/* --------------------------------------------
PERFORMANCE
--------------------------------------------- */
#performance02{
	h2{
		font-weight : 400;
		text-align : center;
	}
	h3{
		font-weight : 400;
		text-decoration : underline;
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 24 * var( --remBase ) );
		h2{
			font-size : calc( 15 * var( --remBase ) );
			line-height : calc( 23 / 15 );
		}
		> ul{
			margin-top : calc( 11 * var( --remBase ) );
			> li{
				+ li{
					margin-top : calc( 10 * var( --remBase ) );
				}
			}
		}
		h3{
			margin-bottom : calc( 1 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			line-height : 1.5;
		}
		ul ul{
			display : flex;
			flex-wrap : wrap;
			li{
				min-width : 50%;
				max-width : 100%;
				font-size : calc( 12 * var( --remBase ) );
				line-height : calc( 16 / 12 );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 30 * var( --remBase ) );
		h2{
			font-size : calc( 25 * var( --remBase ) );
			line-height : 1.52;
		}
		> ul{
			margin-top : calc( 32 * var( --remBase ) );
			> li{
				+ li{
					margin-top : calc( 20 * var( --remBase ) );
				}
			}
		}
		h3{
			padding-left : 2em;
			margin-bottom : calc( 1 * var( --remBase ) );
			font-size : calc( 25 * var( --remBase ) );
			line-height : 1.52;
		}
		ul ul{
			display : flex;
			flex-wrap : wrap;
			column-gap : 1em;
			li{
				min-width : calc( 25% - 2em / 3 );
				max-width : calc( 50% - 1em / 3 );
				font-size : calc( 20 * var( --remBase ) );
				line-height : 1.6;
			}
		}
	}
}

/* --------------------------------------------
TALK
--------------------------------------------- */
#voiceTalks{
	@media screen and ( width <= 768px ){
		ul{
			margin-top : calc( 18 * var( --remBase ) );
		}
		li{
			text-align : center;
		}
		li + li{
			margin-top : calc( 18 * var( --remBase ) );
		}
		img{
			height : calc( 149 * var( --remBase ) );
		}
		.contentAuthor{
			margin-top : calc( 12 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		.contentAuthor{
			margin-top : calc( 23 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
#listFaq{
	> li{
		counter-reset : no;
	}
	li li{
		counter-increment : no;
	}
	h2{
		font-weight : 700;
	}
	h3{
		font-weight : 400;
		color : #8b0000;
		&::before{
			content : "Ａ"counter( no , decimal-leading-zero ) " ";
		}
	}
	h3 + div{
		> p{
			text-indent : 1em;
		}
		> * + *{
			margin-top : 1lh;
		}
	}
	.tables01{
		h4{
			font-weight : 400;
		}
		table{
			background-color : #e0ffeb;
		}
		th , td{
			font-weight : 400;
			text-align : center;
			vertical-align : top;
			border : solid 1px #bbb;
		}
		td[colspan="5"]{
			text-align : left;
		}
		td[colspan="5"]:empty{
			background-color : #9de0ad;
		}
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 37 * var( --remBase ) );
		> li{
			+ li{
				margin-top : calc( 46 * var( --remBase ) );
			}
		}
		h2{
			font-size : calc( 16 * var( --remBase ) );
			line-height : 1.5;
		}
		> li{
			> ul{
				> li + li{
					margin-top : calc( 46 * var( --remBase ) );
				}
			}
		}
		h3{
			font-size : calc( 13 * var( --remBase ) );
			line-height : calc( 20 / 13 );
		}
		h3 + div{
			font-size : calc( 13 * var( --remBase ) );
			line-height : calc( 20 / 13 );
		}
		.datalist01{
			dd , p{
				font-size : calc( 12 * var( --remBase ) );
				line-height : 1.5;
			}
			p{
				margin-top : 1lh;
			}
		}
		.tables01{
			padding-inline : 1em;
			table{
				width : calc( 580 * 100% / 274 );
			}
			th , td{
				padding-block : calc( 10 * var( --remBase ) );
				padding-inline : calc( 5 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
			}
		}
		.tableWrapper{
			width : 100%;
			margin-top : 1lh;
			overflow : auto;
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 80 * var( --remBase ) );
		> li{
			+ li{
				margin-top : calc( 90 * var( --remBase ) );
			}
		}
		h2{
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 28 / 18 );
		}
		> li{
			> ul{
				> li + li{
					margin-top : calc( 27 * var( --remBase ) );
				}
			}
		}
		h3{
			font-size : calc( 15 * var( --remBase ) );
			line-height : calc( 23 / 15 );
		}
		h3 + div{
			font-size : calc( 15 * var( --remBase ) );
			line-height : calc( 23 / 15 );
		}
		.datalist01{
			display : grid;
			grid-template-columns : 8em 1fr;
			align-items : start;
			dt{
				padding-left : 1em;
			}
			p{
				margin-top : 1lh;
			}
		}
		.tables01{
			display : grid;
			grid-template-rows : .5lh auto 1fr;
			grid-template-columns : 8em calc( 580 * 100% / 932 );
			align-items : start;
			justify-content : start;
			h4{
				grid-row : 1/3;
				grid-column : 1;
				padding-left : 1em;
			}
			.tableWrapper{
				grid-row : 2/-1;
				grid-column : 2;
			}
			th , td{
				padding-block : calc( 10 * var( --remBase ) );
				padding-inline : calc( 5 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
			}
		}
	}
}
#navFaq02{
	@media screen and ( width < 1340px ){
		display : none;
	}
	@media screen and ( width >= 1340px ){
		position : fixed;
		top : 0;
		right : 0;
		z-index : 10;
		display : grid;
		grid-template-columns : 1fr;
		align-content : center;
		width : calc( 180 * var( --viewportBase ) );
		height : 100dvh;
		padding-left : calc( 16 * var( --viewportBase ) );
		background-color : color-mix( in sRGB , white 50% , transparent );
		li li{
			margin-top : calc( 4 * var( --remBase ) );
		}
		a{
			display : block;
			display : grid;
			grid-auto-flow : column;
			column-gap : .5em;
			align-items : center;
			justify-content : start;
			font-size : calc( 16 * var( --remBase ) );
			line-height : 1.4;
			&::after{
				display : block;
				width : auto;
				height : calc( 16 * var( --remBase ) );
				aspect-ratio : 1;
				font-size : 0;
				content : "";
				border-radius : 50%;
				outline : solid calc( 2 * var( --remBase ) ) currentColor;
				outline-offset : calc( -2 * var( --remBase ) );
			}
			&.is-active{
				&::after{
					background-color : currentColor;
				}
			}
		}
	}
}
@media ( hover : hover ){
	#navFaq02{
		a:hover{
			&::after{
				background-color : currentColor;
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#navFaq02{
		a{
			&::after{
				transition : background-color var( --transitionBase );
			}
		}
	}
}
#pagination{
	position : relative;
	left : 50%;
	display : inline-grid;
	grid-template-rows : 100%;
	grid-auto-flow : column;
	translate : -50% 0;
	a , span{
		display : grid;
		place-items : center;
	}
	:where( .prev , .next ){
		position : absolute;
	}
	a , span{
		width : auto;
		aspect-ratio : 1;
		font-weight : 500;
		outline : solid 1px var( --blue );
		outline-offset : -1px;
	}
	a{
		color : var( --blue );
	}
	.current{
		font-weight : 600;
		color : white;
		background-color : var( --blue );
	}
	@media screen and ( width <= 768px ){
		column-gap : calc( 8 * var( --remBase ) );
		a , span{
			height : calc( 28 * var( --remBase ) );
			font-size : calc( 12 * var( --remBase ) );
		}
		.prev{
			left : calc( -36 * var( --remBase ) );
		}
		.next{
			right : calc( -36 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		column-gap : calc( 20 * var( --remBase ) );
		a , span{
			height : calc( 32 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
		}
		.prev{
			left : calc( -52 * var( --remBase ) );
		}
		.next{
			right : calc( -52 * var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	#pagination{
		a:hover{
			color : white;
			background-color : var( --blue );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#pagination a{
		transition : background .3s linear , color .3s linear;
	}
}